<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="utf-8">
  <title>宠物管理系统</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <link rel="stylesheet" href="layui/css/layui.css">
  <link rel="stylesheet" href="../static/layui/css/layui.css">
  <script src="../static/layui/jquery.min.js"></script>
  <script th:src="@{/js/jquery.js}"></script>
  <script src="../static/layui/layui.js"></script>
  <script th:src="@{/layui/layui.js}"></script>
</head>
<body>
<ul class="layui-nav layui-bg-green">
  <li class="layui-nav-item"><a href="findAll">所有宠物信息</a></li>
  <li class="layui-nav-item "><a href="index">查找</a></li>
  <li class="layui-nav-item layui-this" ><a href="add.html">添加宠物</a></li>
  <li class="layui-nav-item"><a href="delByName.html">删除宠物</a></li>
  <li class="layui-nav-item"><a href="update.html">修改信息</a></li>
</ul>
<form class="layui-form layui-form-pane" action="add" method="post">
  <div class="layui-form-item">
    <label class="layui-form-label">宠物名字</label>
    <div class="layui-input-inline">
      <input type="text" name="petName" lay-verify="required" placeholder="请输入宠物名字" lay-reqtext="不能为空" autocomplete="off" class="layui-input">
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">宠物年龄</label>
    <div class="layui-input-inline">
      <input type="text" name="age" lay-verify="required" placeholder="请输入宠物年龄" lay-reqtext="不能为空" autocomplete="off" class="layui-input">
    </div>
  </div>
  <div class="layui-form-item" pane="">
    <label class="layui-form-label">性别</label>
    <div class=" layui-input-inline">
      <input type="radio" name="sex" value="公" title="公" checked="">
      <input type="radio" name="sex" value="母" title="母">
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">毛色</label>
    <div class="layui-input-inline">
      <input type="text" name="color" lay-verify="required" placeholder="请输入宠物毛色" lay-reqtext="不能为空" autocomplete="off" class="layui-input">
    </div>
  </div>
  <div class="layui-form-item" pane="">
    <label class="layui-form-label">类型</label>
    <div class="layui-input-block">
      <input type="radio" name="type" value="猫" title="猫" >
      <input type="radio" name="type" value="狗" title="狗">
      <input type="radio" name="type" value="其它" title="其它" checked="checked">
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">主人名字</label>
    <div class="layui-input-inline">
      <input type="text" name="masterName" lay-verify="required" placeholder="请输入主人姓名" lay-reqtext="不能为空" autocomplete="off" class="layui-input">
    </div>
  </div>
  <div class="layui-form-item">
    <div class="layui-input-block">
      <button type="submit" class="layui-btn" lay-submit="" lay-filter="demo1" >立即添加</button>
      <button type="reset" class="layui-btn layui-btn-primary">重新填写</button>
    </div>
  </div>
</form>

<script>
  layui.use(['form', 'layedit', 'laydate'], function(){
    var form = layui.form
            ,layer = layui.layer
            ,layedit = layui.layedit
            ,laydate = layui.laydate;

    //日期
    laydate.render({
      elem: '#date'
    });
    laydate.render({
      elem: '#date1'
    });

    //创建一个编辑器
    var editIndex = layedit.build('LAY_demo_editor');

    //自定义验证规则
    form.verify({
      title: function(value){
        if(value.length < 5){
          return '标题至少得5个字符啊';
        }
      }
      ,pass: [
        /^[\S]{6,12}$/
        ,'密码必须6到12位，且不能出现空格'
      ]
      ,content: function(value){
        layedit.sync(editIndex);
      }
    });

    //监听指定开关
    form.on('switch(switchTest)', function(data){
      layer.msg('开关checked：'+ (this.checked ? 'true' : 'false'), {
        offset: '6px'
      });
      layer.tips('温馨提示：请注意开关状态的文字可以随意定义，而不仅仅是ON|OFF', data.othis)
    });

    //表单赋值
    layui.$('#LAY-component-form-setval').on('click', function(){
      form.val('example', {
        "username": "贤心" // "name": "value"
        ,"password": "123456"
        ,"interest": 1
        ,"like[write]": true //复选框选中状态
        ,"close": true //开关状态
        ,"sex": "女"
        ,"desc": "我爱 layui"
      });
    });

    //表单取值
    layui.$('#LAY-component-form-getval').on('click', function(){
      var data = form.val('example');
      alert(JSON.stringify(data));
    });

  });
</script>
</body>
</html>